<template>
	<view class="content">
		<view class="top">
		</view>
		<view class="body" :style="{
		paddingTop:$top()+'px'
	}">
			<view class="suo">
				<view @click="show_(true)" style="width: 22%;display: flex;
				align-items: center;
				">
					<text>{{dizhix.city?dizhix.city.name:'地址'}}</text>
					<image style="margin-left: 10rpx;" class="img" src="../../static/img/tb.png" />
				</view>

				<view class="input">
					<image class="img_1" src="../../static/img/su.png" />
					<input type="text" value="" placeholder="请输入搜索信息" />
				</view>
			</view>
			<u-swiper height="330" :list="info.lb_img"></u-swiper>
			<view class="kaipian">
				<view class="kaipian_c" >
					<image src="../../static/img/zr.png" />
					<text>店铺转让</text>
				</view>
				<view class="kaipian_c">
					<image src="../../static/img/mm.png" />
					<text>门面出租</text>
				</view>
				<view class="kaipian_c">
					<image src="../../static/img/es.png" />
					<text>二手设备</text>
				</view>
				<view class="kaipian_c">
					<image src="../../static/img/qz.png" />
					<text>求租信息</text>
				</view>
				<view class="kaipian_c">
					<image src="../../static/img/qz.png" />
					<text>成功案例</text>
				</view>
			</view>
			<image class="gag" :src="info.gg_img[0].images" />
			<text class="text_1">数据统计</text>
			<view class="carp_all">
				<view class="carp_2">
					<text>累计用户</text>
					<text>{{info.total_user}}</text>
					<view class="carp_2_1">
						<text>昨日新增</text>
						<view class="carp_2_2">
							<image src="../../static/img/up.png" />
							<text>{{info.add_user}}</text>
						</view>
					</view>
				</view>
				<view class="carp_2">
					<text>累计转店</text>
					<text>{{info.total_cz}}</text>
					<view class="carp_2_1">
						<text>昨日新增</text>
						<view class="carp_2_2">
							<image src="../../static/img/up.png" />
							<text>{{info.add_cz}}</text>
						</view>
					</view>
				</view>
				<view class="carp_2">
					<text>累计找店</text>
					<text>{{info.total_zd}}</text>
					<view class="carp_2_1">
						<text>昨日新增</text>
						<view class="carp_2_2">
							<image src="../../static/img/up.png" />
							<text>{{info.add_zd}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="carp_xx">
				<image src="../../static/img/lb.png" />
				<text>消息</text>
				<swiper class="swiper" :indicator-dots='false' vertical autoplay>
					<swiper-item v-for="(item,index) in info.notice">
						<view style="line-height:86rpx">
							{{item.content}}
						</view>
					</swiper-item>
				</swiper>
				<!-- 	 <text>超市-郑东新区-龙子湖 店铺已成功转让</text> 
				<image src="../../static/img/qx.png" /> -->
			</view>
		</view>
		<!-- one -->
		<view class="xinxi">
			<!-- 选项卡 -->
			<my-tab v-if="advertList1.length>0" :list="advertList1" @onchang='onchang' />
			<info-carp :bq='false' :list='list' v-if="list.length>0"/>
			<u-empty   v-if="list.length==0" 
			src='https://puputong.huijipin.cn/uploads/20220324/03b7bd3131e2eed5e10ccdca68477ce7.png'
			text="暂无内容..." mode="list" />
		</view>
		<view class="xinxi">
			<my-tab v-if="advertList2.length>0" :list="advertList2" @onchang='onchang2' />
			<info-carp :bq='false' :list='list2'></info-carp>
		</view>
		<view class="xinxi">
			<my-tab :list="[
				{name:'门面出租'},
			]"></my-tab>
			<info-carp :bq='false' :list='advertList3.mmcz'></info-carp>
		</view>
		<view class="xinxi">
			<my-tab :list="[
				{name:'成功案例'},
			]"></my-tab>
			<info-carp :cg='true' :bq='false' :list='advertList3.cgal'></info-carp>
		</view>
		<view class="xinxi" v-if="advertList3&&advertList3.qz.length>0">
			<my-tab :list="[
				{name:'求租信息'},
			]"></my-tab>
			<info-carp :bq='false' :list='advertList3.qz'></info-carp>
		</view>
		<view>
			<my-tab :nav="{
				url:'/pages/index/storeTransfer/storeTransfer',
				type:1
			}" :list="[
				{name:'资讯'},
			]"></my-tab>
			<view class="zixun" @click="zx(item)" v-for="(item,index) in advertList3.zx">
				<view class="zixun1">
					<image :src="item.image" class="zixun_1" />
					<view class="zixun_2">
						<text>{{item.title}}</text>
						<text>{{item.describe}}</text>
					</view>
				</view>
				<view class="xian">

				</view>
				<view class="zixun_3">
					查看详情
				</view>
			</view>
		</view>
		<!-- 发布遮罩 -->
		<fb-pop ref="children" />
		<!-- 遮罩选择 -->
		<my-pop ref="child" zhanshi="1" />
		<u-tabbar @change="change" safeAreaInsetBottom v-model="current" :list="$list()" :mid-button="true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showz: false,
				show: true,
				noticeMsg: '啊发发撒',
				current: 0,
				advertList: [],
				advertList3: {},
				list: [],
				list2: [],
				info: {

				},
				goUpNoticeList: [{
						directOne1: '路遥知马力，日久见人心',
						directOne2: '《元曲选·争报恩》',
					}, {
						directOne1: '天生我材必有用',
						directOne2: '李白',
					},
					{
						directOne1: '穷则独善其身，达则兼济天下',
						directOne2: '孟子',
					}, {
						directOne1: '业精于勤，荒于嬉；行成于思，毁于随',
						directOne2: '韩愈',
					}, {
						directOne1: '一年之计在于春，一日之计在于晨',
						directOne2: '萧绎',
					},
				],
				swiper: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		computed: {
			dizhix() {
				return this.$store.state.dizhi
			},
			advertList1() {
				return this.advertList.slice(0, 4)
			},
			advertList2() {
				return this.advertList.slice(4)
			}
		},
		onLoad() {},
		async onShow() {
			await this.getinfo()

		},
		methods: {
			zx(a){
				uni.navigateTo({
					url: '/pages/index/storeTransfer/storeTransferxq?id=' + a.id
				})
			},
			//数据
			onchang(a) {
				this.list = a.list
			},
			//数据2
			onchang2(a) {
				this.list2 = a.list
				console.log(this.list2);
			},
			getinfo() {
				this.api('Index/indexImgs').then(res => {
					res.data.lb_img.forEach(v => {
						v.image = v.images
					})
					this.info = res.data
				})
				this.api('Index/advertList').then(res => {
					this.advertList = res.data
				})
				this.api('Index/indexList').then(res => {
					this.advertList3 = res.data
				})
			},
			//发布按钮
			change(index) {
				if (index == 2) {
					this.$refs.children.sign()
				}
			},
			show_(a) {
				this.$refs.child.sign(true, 1)
			},
		}

	}
</script>

<style lang="scss" scoped>
	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	::v-deep .u-tabbar__content {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.warp {
		position: relative;
		min-height: 650rpx;
		padding-bottom: 110rpx;
		box-sizing: border-box;
		max-height: 1044rpx;

		.bfoot {
			position: absolute;
			width: 93%;
			left: 50%;
			transform: translateX(-50%);
			bottom: 15rpx;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			overflow: hidden;

			text:nth-of-type(1) {
				width: 50%;
				display: inline-block;
				height: 80rpx;
				background: #FD9805;
				display: inline-block;
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #FFFFFF;
			}

			text:nth-of-type(2) {
				width: 50%;
				display: inline-block;
				height: 80rpx;
				background: #FF1B1B;
				display: inline-block;
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.neir {
			padding-left: 30rpx;
			padding-right: 30rpx;
			background-color: #F4F5F7;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			text {
				font-size: 26rpx;
				font-family: OPPOSans;
				font-weight: 400;
				color: #333333;
				display: block;
				height: 90rpx;
				line-height: 90rpx;
				width: 50%;
			}
		}

		.scroll-x {
			width: 30%;
			max-height: 900rpx;
			border-right: 1rpx solid #F1F1F1;
			display: flex;
			box-sizing: border-box;
			flex-wrap: nowrap;
			white-space: nowrap;
			padding: 10upx 20upx 0;
		}

		.sku_2 {
			font-size: 26rpx;
			font-family: OPPOSans;
			font-weight: 500;
			color: #181818;
			line-height: 80rpx;
		}

		.sku_1 {
			display: inline-block;
			margin-right: 20rpx;
			padding: 0 20rpx 0 20rpx;
			text-align: center;
			line-height: 60rpx;
			background: #F4F5F7;
			color: #666666;

			text {
				margin-right: 10rpx;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}
		}

		.sku {
			display: flex;
			width: 100%;

			.sku_1 {
				width: 180rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background: #F4F5F7;
				border-radius: 30px;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}

		}

		.suo {
			padding: 30rpx 30rpx 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-height: 100rpx;

			.input {
				border: 1px solid #FF1B1B;
				display: flex;
				align-items: center;
				padding-left: 25rpx;
				width: 560rpx;
				height: 60rpx;
				background: rgba($color:#FFFFFF, $alpha: 0.3);
				border-radius: 30px;

				.img_1 {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}

				input {
					width: 100%;

					::v-deep .input-placeholder {
						font-size: 24rpx;
						font-family: OPPOSans;
						font-weight: 400;
						color: black;
					}
				}
			}

			text {
				display: inline-block;
				font-size: 28rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #181818;
			}

			.img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

		}
	}

	.zixun {
		position: relative;
		background-color: white;
		padding: 30rpx 30rpx 0rpx 30rpx;

		image {
			width: 199rpx;
			height: 171rpx;
		}

		.xian {
			height: 1px;
			background: #F1F1F1;
			margin-top: 30rpx;
		}

		.zixun1 {
			display: flex;
		}

		.zixun_3 {
			width: 134rpx;
			height: 50rpx;
			border: 1rpx solid #FF1B1B;
			right: 30rpx;
			border-radius: 6rpx;
			font-size: 24rpx;
			font-family: OPPOSans;
			text-align: center;
			line-height: 50rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-weight: 500;
			color: #FF1B1B;
		}

		.zixun_2 {
			width: 45%;
			margin-left: 30rpx;

			text:nth-of-type(1) {
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: bold;
				color: #181818;
			}

			text:nth-of-type(2) {
				display: block;
				font-size: 22rpx;
				font-family: OPPOSans;
				font-weight: 400;
				color: #666666;
				margin-top: 15rpx;
			}

			// border: 1px solid black;
		}
	}

	.xinxi {
		margin-top: 30rpx;

		.qiuzhu {
			width: 92%;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			margin: 0 auto 20rpx;
			height: 186rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url(http://puputong.huijipin.cn/uploads/20220321/575bd2b2f76fe590290987ad2c5c990d.png);
			display: flex;
			justify-content: space-between;

			.qiuzhu_1 {
				width: 46rpx;
				height: 46rpx;
				background: #FFFFFF;
				border: 2rpx solid #FF1B1B;
				text-align: center;
				border-radius: 50%;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #FF1B1B;
				line-height: 46rpx;
			}

			.qiuzhu_2 {
				width: 90%;

				.qiuzhu_2_1 {
					font-size: 30rpx;
					font-family: OPPOSans;
					font-weight: bold;
					color: #181818;
				}

				.qiuzhu_2_2 {
					margin: 15rpx 0 15rpx 0;
					display: flex;
					justify-content: space-between;
					width: 70%;

					text {
						display: inline-block;
					}

					text {
						font-size: 24rpx;
						font-family: OPPOSans;
						font-weight: 500;
						color: #666666;
					}
				}

				.qiuzhu_2_3 {
					font-size: 20rpx;
					font-family: OPPOSans;
					font-weight: 500;
					color: #999999;
				}

				text {
					display: block;
				}

			}
		}
	}

	// .text_all {
	// 	padding: 0rpx 30rpx 30rpx 30rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;

	// 	.text_all_1 {
	// 		width: 85%;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		.text_102 {
	// 			font-size: 32rpx;
	// 			font-family: OPPOSans;
	// 			font-weight: bold;
	// 			color: #181818;
	// 		}

	// 		.text_10 {
	// 			font-size: 28rpx;
	// 			font-family: OPPOSans;
	// 			font-weight: 400;
	// 			color: #666666;
	// 		}
	// 	}


	// 	.text_101 {
	// 		font-size: 24rpx;
	// 		font-family: OPPOSans;
	// 		font-weight: 500;
	// 		color: #999999;
	// 	}


	// }

	.content {
		position: relative;
		min-height: 1350rpx;
		background-color: #F4F5F7;
		padding-bottom: 150rpx;

		.top {
			width: 100%;
			height: 440rpx;
			background-image: url(https://s4.ax1x.com/2022/03/03/bY54Hg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.body {
			min-height: 600rpx;
			margin-top: -440rpx;
			padding: 30rpx 30rpx 0rpx 30rpx;

			.carp_xx {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 86rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 25rpx 0 25rpx;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: ZhenyanGB;
					font-weight: 600;
					color: #FF1B1B;
				}

				.swiper {
					display: inline-block;
					width: 75%;
					height: 100%;
					font-size: 24rpx;
					font-family: OPPOSans;
					font-weight: 500;
					color: #181818;
				}

				image:nth-of-type(1) {
					width: 41rpx;
					height: 35rpx;
				}

				image:nth-of-type(2) {
					width: 21rpx;
					height: 21rpx;
				}
			}

			.carp_all {
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;

				.carp_2 {
					background-color: #FFFFFF;
					padding: 25rpx 15rpx 25rpx 15rpx;
					width: 28%;
					border-radius: 16rpx;

					.carp_2_1 {
						margin-top: 10rpx;
						display: flex;
						align-items: center;

						text:nth-of-type(1) {
							font-size: 20rpx;
							font-family: OPPOSans;
							font-weight: 500;
							color: #999999;
						}

						.carp_2_2 {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 94rpx;
							text-align: center;
							line-height: 40rpx;
							height: 40rpx;
							background: #F4F5F7;
							border-radius: 4rpx;

							image {
								width: 12rpx;
								height: 12rpx;
							}

							text:nth-of-type(1) {
								font-size: 22rpx;
								font-family: OPPOSans;
								font-weight: bold;
								color: #666666;
							}
						}
					}

					text {
						display: block;
					}

					text:nth-of-type(1) {
						font-size: 24rpx;
						font-family: OPPOSans;
						font-weight: 500;
						color: #181818;
					}

					text:nth-of-type(2) {
						font-size: 32rpx;
						font-family: OPPOSans;
						font-weight: bold;
						color: #FF1B1B;
					}
				}
			}

			.text_1 {
				font-size: 32rpx;
				font-family: OPPOSans;
				font-weight: bold;
				color: #181818;
				display: inline-block;
				margin-bottom: 15rpx;
			}

			.gag {
				border-radius: 16rpx;
				width: 100%;
				height: 175rpx;
				margin-bottom: 30rpx;
			}

			.kaipian {
				display: flex;
				margin-top: 40rpx;
				margin-bottom: 40rpx;

				.kaipian_c {
					width: 24%;
					text-align: center;

					image {
						width: 84rpx;
						height: 84rpx;
					}

					text {
						display: block;
						font-size: 24rpx;
						font-family: OPPOSans;
						font-weight: 500;
						color: #181818;
					}
				}

			}

			.suo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;

				.input {
					display: flex;
					align-items: center;
					padding-left: 25rpx;
					width: 100%;
					height: 60rpx;
					background: rgba($color:#FFFFFF, $alpha: 0.3);
					border-radius: 30px;

					.img_1 {
						width: 28rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}

					input {
						width: 100%;

						::v-deep .input-placeholder {
							font-size: 24rpx;
							font-family: OPPOSans;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}

				text {
					font-size: 28rpx;
					font-family: OPPOSans;
					font-weight: 500;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.img {
					width: 22rpx;
					height: 12rpx;
				}

			}

			.body2 {
				// border: 1rpx solid black;
				width: 100%;
				height: 100rpx;
			}
		}
	}
</style>
